<template>
  <div>
    <div class="title">
      <span class="iconfont icon-left gobackIcon" @click="()=>{this.$router.go(-1)}"></span>
      <p>订单管理</p>
    </div>
    <div class="tabListSty">
      <nodataPage v-if="orderList.length<1" />
      <van-tabs v-model="active" line-height="2px" title-active-color="#0cbccb" color="#0cbccb">
        <van-tab v-for="item in tabItem" :key="item" :title="item">
          <van-card v-for="list in orderList" :key="list.id">
            <div slot="thumb">
              <img :src="list.product.mainImage" alt style="width:70px" />
            </div>
            <div slot="title" class="titleSty">{{list.product.productName}}</div>
            <div
              slot="price"
              style="margin-top:20px;font-size:16px;font-weight:normal"
            >合计：{{list.orderAmount}}</div>
            <div slot="num" style="margin:20px 10px">数量：{{list.quantity}}</div>
            <div slot="footer" class="send" v-if="active === 0">
              <div class="orderInfo">
                <div class="leftText">
                  <p>订单编号：{{list.orderSn}}</p>
                  <p>支付时间：{{list.createDate}}</p>
                </div>
                <div class="rightButton">
                  <van-button class="btn" @click="show=true,itemindex = list.id">发货</van-button>
                </div>
              </div>
              <div class="userInfo">
                <div class="leftText">
                  <p>收货人：{{list.receiverName}}</p>
                  <p>收货地址：{{list.deliverAddress}}</p>
                </div>
                <div class="rightPhone">{{list.mobileNo}}</div>
              </div>
            </div>
            <div slot="footer" class="send" v-if="active === 1 || active === 2">
              <div class="orderInfo">
                <div class="leftText">
                  <p>订单编号：{{list.orderSn}}</p>
                  <p>支付时间：{{list.createDate}}</p>
                  <p>快递公司：{{list.expressType}}</p>
                  <p>快递单号：{{list.deliveryCode}}</p>
                </div>
                <div class="rightStatus">
                  <span v-if="active === 1">待收货</span>
                  <div v-if="active === 2">
                    <img
                      style="width:14px;height:14px"
                      src="https://gve.oss-cn-beijing.aliyuncs.com/2020/02/06/1580965582740.png"
                      alt
                    />
                    <span>已收货</span>
                  </div>
                </div>
              </div>
              <div class="userInfo">
                <div class="leftText">
                  <p>收货人：{{list.receiverName}}</p>
                  <p>收货地址：{{list.deliverAddress}}</p>
                </div>
                <div class="rightPhone">{{list.mobileNo}}</div>
              </div>
            </div>
          </van-card>
        </van-tab>
      </van-tabs>
    </div>
    <van-action-sheet v-model="show" class="actionSheet" style="height:60%" @select="onSelect">
      <div class="titleInput">
        <p>快递单号</p>
        <input v-model="trackingNumber" type="text" placeholder="请填写快递单号" />
      </div>
      <div class="picker">
        <van-picker :columns="columns" @change="onChange" ref="getValues" />
      </div>
      <div class="bottomBtn">
        <van-button block class="btn" @click="ship()">确认发货</van-button>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import nodataPage from "../../../components/nodata.vue";
export default {
  components: {
    nodataPage
  },
  data: () => ({
    active: 0,
    tabItem: ["待发货", "待收货", "已收货"],
    columns: [],
    show: false,
    trackingNumber: null, //快递单号
    orderList: [],
    itemindex: null
  }),
  created() {
    this.$axios.get(`ym/express/list`).then(res => {
      console.log(res);
      if (res.code === 0) {
        res.data.forEach(msg => {
          this.columns.push(msg.name);
        });
      }
    });
    this.$axios
      .get(`ym/online-merchant-order/list?page=1&limit=5&orderStatus=0`)
      .then(res => {
        console.log(res);
        if (res.code === 0) {
          let records = res.data.records;
          records.forEach(msg => {
            this.orderList.push(msg);
          });
          console.log(this.orderList);
        }
      });
  },
  mounted() {
    this.getcommodityList(0);
  },
  watch: {
    active(newValue) {
      console.log(newValue);
      this.orderList = [];
      this.getcommodityList(newValue);
    }
  },
  methods: {
    onChange(picker, value, index) {
      window.console.log(value, index);
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      window.console.log(item);
    },
    getcommodityList(status) {
      this.$axios
        .get(
          `ym/online-merchant-order/list?page=1&limit=5&orderStatus=${status}`
        )
        .then(res => {
          if (res.code === 0) {
            let records = res.data.records;
            records.forEach(msg => {
              this.orderList.push(msg);
            });
            console.log(this.orderList);
          }
        });
    },
    ship() {
      console.log(this.trackingNumber);
      let event = {
        id: this.itemindex,
        expressType: this.$refs.getValues.getValues()[0],
        deliveryCode: this.trackingNumber
      };
      console.log(event);
      this.$axios.post(`ym/online-merchant-order/deliver`, event).then(res => {
        console.log(res);
        if (res.data.code === 0) {
          this.$Toast("发货成功");
          this.show = false;
          this.orderList.forEach((msg, index) => {
            if (this.itemindex === msg.id) {
              this.orderList.splice(index, 1);
            }
          });
        } else {
          this.$Toast("发货失败");
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.title {
  margin: 0;
  padding: 10px 0;
  background: #0cbccb;
  color: #fff;
  .gobackIcon {
    border: 1px solid #0cbccb;
    position: absolute;
    left: 10px;
  }
  p {
    margin: 0;
    padding: 0;
    text-align: center;
  }
}
.titleSty {
  color: #0cbccb;
  font-size: 12px;
}
.tabListSty {
  .orderInfo {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #dedede;
    color: #666;
    .leftText {
      width: 50%;
      p {
        text-align: left;
        margin: 0;
      }
    }
    .rightStatus {
      width: 50%;
      display: flex;
      text-align: right;
      justify-content: flex-end;
      align-items: center;
      span {
        color: #0cbccb;
      }
    }
    .rightButton {
      width: 50%;
      .btn {
        height: 25px;
        line-height: 25px;
        border-radius: 20px;
        border-color: #ff0000;
        color: #ff0000;
        font-size: 12px;
      }
    }
  }
  .userInfo {
    display: flex;
    padding: 10px 0;
    color: #666;
    .leftText {
      width: 70%;
      p {
        text-align: left;
        margin: 0;
      }
    }
    .rightPhone {
      width: 30%;
    }
  }
}
.actionSheet {
  .titleInput {
    padding: 10px;
    p {
      margin: 0;
      padding: 10px 0;
    }
    input {
      padding: 5px 0;
      width: 100%;
      border: none;
      border-bottom: 1px solid #0cbccb;
      &::placeholder {
        font-size: 12px;
        color: #606060;
      }
    }
  }
  .bottomBtn {
    .btn {
      border-radius: 30px;
      background: #0cbccb;
      color: #fff;
    }
  }
}
</style>